<!-- 经典布局 -->
<template>
  <a-layout class="layout-container">
    <!-- 左侧菜单 -->
    <a-layout-sider
      v-model:collapsed="iscollapsed"
      :trigger="null"
      collapsible
      theme="light"
      :style="{
        width: iscollapsed ? '65px' : '210px',
        // transition: 'width 1s ease-in-out'
      }"
      class="layout-sider"
    >
      <div class="logo">
        <img class="logo-img" src="../../assets/images/logo.svg" alt="logo" />
        <span v-if="!iscollapsed" class="logo-text">ant-design</span>
      </div>
      <div class="menu-scrollbar">
        <Menu></Menu>
      </div>
    </a-layout-sider>
    <a-layout>
      <!-- 顶部导航 -->
      <a-layout-header class="layout-header">
        <Header></Header>
        <div class="header-bottom">
          <TabNav></TabNav>
        </div>
      </a-layout-header>
      <!-- 内容展示区 -->
      <a-layout-content :style="{ minHeight: '280px' }" class="layout-content">
        <router-view></router-view>
      </a-layout-content>
      <!-- 底部区域 -->
      <Footer></Footer>
    </a-layout>
  </a-layout>
</template>
<script setup lang="ts">
import Header from '../components/Header';
import { storeToRefs } from 'pinia';
import { useGlobalStore } from '@/store/modules/global';
import Menu from '../components/Menu';
import TabNav from '../components/TabNav';
import Footer from '../components/Footer';
const globalStore = useGlobalStore();
const { iscollapsed } = storeToRefs(globalStore);
</script>

<style lang="scss" scoped>
@use './index.scss';
</style>
